<template>
  <div class="accesscontrol_Box">
    <div class="accesscontrol_titleBox">
      <div class="titleBox1_l">
        <div class="Title_icon"></div>
        <span class="public_Text">门禁通行记录（今日）</span>
      </div>
      <div class="titleBox1_r" @click="addClose"></div>
    </div>
    <div class="accesscontrol_contenBox">
      <div class="accesscontrol_contenItem" v-for="(item,index) in shujvList" :key="index">
        <div class="contenItem_bom">
          <div class="box_l">
            <div class="box_lIcon"></div>s
            <span>人员: {{item?.EMP_NAME}}</span>
          </div>
          <div class="box_R">
            <div class="box_RIcon"></div>
            <span class="shijianSpan">时间: {{item?.CZSJ}}</span>
          </div>
        </div>
        <!-- 出入按钮 -->
        <div :class="item?.CZJL==0 ? 'contenItem_iconru':'contenItem_iconChu'"></div>
      </div>
    </div>
  </div>
</template>
<script setup>
  import { ref, onMounted, watch } from "vue"
  import { postDatacenterdbapiDbapi } from "@/api/index.js"
  const props = defineProps({
    menjinObj: {
      type: Object,
      default: true
    }
  })
  const emit = defineEmits(["clsoeAccesscontrol"])
  const addClose = () => {
    emit("clsoeAccesscontrol")
  }
  const shujvList = ref([])
  const init = async (data) => {
    console.log(data.DevicesId,'门禁id');
    
    let tijiaoList = {
      apiid: "guard_record",
      token: "guard_record",
      appid: "门禁信息列表",
      apptype: "trans",
      // position_id: "4-19"
      position_id: data.DevicesId  // 后期接了真实数据解开
    }
    const res = await postDatacenterdbapiDbapi(tijiaoList)
    console.log(JSON.parse(res.data.data), '监听到了门禁的消息');
    shujvList.value = JSON.parse(res.data.data)
  }
  watch(
    () => props.menjinObj,
    val => {
      console.log(val, '监听到了门禁的消息');
      init(val)
    },
    {
      deep: true,
      immediate: true
    }
  )
</script>
<style scoped lang="less">
  .accesscontrol_Box {
    width: 100%;
    height: 100%;
    background: url("@/assets/accessControl/changbeijing.png") no-repeat center;
    background-size: 100% 100%;

    .accesscontrol_titleBox {
      width: 808px;
      height: 60px;
      position: absolute;
      left: 50%;
      top: 20px;
      transform: translate(-50%, 0);
      display: flex;
      align-items: center;
      justify-content: space-between;

      .titleBox1_l {
        width: 600px;
        height: 60px;
        display: flex;
        align-items: center;

        .Title_icon {
          margin-left: 20px;
          width: 50px;
          height: 50px;
          background: url("@/assets/accessControl/shuaka.png") no-repeat center;
          background-size: 100% 100%;
        }

        span {
          margin-left: 20px;
        }
      }

      .titleBox1_r {
        cursor: pointer;
        width: 80px;
        height: 80px;
        background: url("@/assets/PatientInformation/xhao.png") no-repeat center;
        background-size: 100% 100%;
      }
    }

    .accesscontrol_contenBox {
      width: 808px;
      height: 1290px;
      position: absolute;
      left: 50%;
      top: 120px;
      transform: translate(-50%, 0);
      overflow-y: scroll;

      .accesscontrol_contenItem {
        margin-bottom: 16px;
        width: 808px;
        height: 84px;
        border-radius: 16px;
        border: 2px solid #8da3bc;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        padding-left: 36px;
        position: relative;

        .contenItem_bom {
          width: 80%;
          height: 38px;
          display: flex;

          .box_l {
            width: 35%;
            display: flex;
            align-items: center;

            .box_lIcon {
              width: 38px;
              height: 38px;
              background: url("@/assets/accessControl/renyuan.png") no-repeat center;
              background-size: 100% 100%;
            }

            span {
              margin-left: 15px;
              color: #000;
              font-family: "PingFang SC";
              font-size: 26px;
              font-style: normal;
              font-weight: 400;
              line-height: normal;
              word-spacing: normal;

            }
          }

          .box_R {
            width: 70%;
            display: flex;
            align-items: center;
            word-spacing: normal;
            .box_RIcon {
              width: 38px;
              height: 38px;
              background: url("@/assets/accessControl/shijian.png") no-repeat center;
              background-size: 100% 100%;
            }

            .shijianSpan {
              margin-left: 15px;
              color: #000;
              font-family: "PingFang SC";
              font-size: 26px;
              font-style: normal;
              font-weight: 400;
              line-height: normal;
           

            }
          }
        }

        .contenItem_iconru {
          position: absolute;
          top: 16px;
          right: 36px;
          width: 52px;
          height: 52px;
          background: url("@/assets/accessControl/ru.png") no-repeat center;
          background-size: 100% 100%;
        }

        .contenItem_iconChu {
          position: absolute;
          top: 16px;
          right: 36px;
          width: 52px;
          height: 52px;
          background: url("@/assets/accessControl/chu.png") no-repeat center;
          background-size: 100% 100%;
        }
      }
    }
  }
</style>